<template>
  <div class="home-page">
    <div class="header" style="display: flex;flex-direction: row;">
      <div style="width: 33%;">
        
      </div>
      <div style="width: 34%;">
        <img :src="imageType.zf" style="height: 40px;">
      </div>
      <div style="width: 33%;display: flex;flex-direction: row-reverse;">
        <div style="display: flex;flex-direction: column;text-align: left;padding-right: 4px;color: #303133;">
        <div><img :src="imageType.normal" style="height: 10px;width: 10px;" />
        场景事中拦截比率&lt;=40%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
        <div><img :src="imageType.warning" style="height: 10px;width: 10px;" />
          40%&lt;场景事中拦截比率&lt;=70% </div>
        <div><img :src="imageType.error" style="height: 10px;width: 10px;" />
          场景事中拦截比率&gt;70% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </div>
      </div>
      
     
    </div>
    <div class="flow-wrap">
      <!--泳道-->
      <div class="step" style="background-color: #F5F5F5;">
        <div class="step-title-revnue">
          <img :src="imageType.gc" ><br>
          工程</div>
        <!--节点-->
        <div class="step-item" style="left:180px;top:50px;">立项设计</div>
        <div class="step-item" style="left:400px;top:50px;">实施</div>
        <div class="step-item" style="left:620px;top:50px;">内部验收</div>
        <div class="step-item" style="left:840px;top:50px;">完工交维</div>
        <!--超链接-->
        <div class="step-link" style="left:180px;top:23px;" >
          <img class="imgico" :src="imageType.normal" />
          项目立项设计环节价格预警提示
        </div>
        <!--文本-->
        <div class="step-link step-line-text" style="left:300px;top:58px;font-size:12px;" >
          项目数据
        </div>
        <div class="step-link step-line-text" style="left:520px;top:58px;font-size:12px;" >
          项目数据
        </div>
        <div class="step-link step-line-text" style="left:540px;top:88px;font-size:12px;" >
          设计清单数据
        </div>
        <div class="step-link step-line-text" style="left:730px;top:58px;font-size:12px;" >
          项目数据
        </div>
        <div class="step-link step-line-text" style="left:760px;top:78px;font-size:12px;" >
          项目状态数据
        </div>
        <!--线-->
        <div class="step-line" style="left:250px;top:64px;width:150px;"></div>
        <div class="step-line" style="left:470px;top:64px;width:150px;"></div>
        <div class="step-line" style="left:690px;top:64px;width:150px;"></div>

        <div class="step-line verline" style="left:240px;top:78px;height:20px;"></div>
        <div class="step-line" style="left:240px;top:98px;width:388px;"></div>
        <div class="step-line verline" style="left:628px;top:79px;height:20px;"></div>

        <div class="step-line verline" style="left:628px;top:79px;height:20px;"></div>
        <div class="step-line verline" style="left:188px;top:77px;height:110px;"></div>


        <div class="step-line verline" style="left:206px;top:77px;height:108px;"></div>
        <div class="step-line verline" style="left:220px;top:77px;height:106px;"></div>

        <div class="step-line verline" style="left:436px;top:77px;height:100px;"></div>
        <div class="step-line verline" style="left:682px;top:77px;height:30px;"></div>

        <div class="step-line " style="left:682px;top:87px;width:190px;"></div>
        <div class="step-line verline" style="left:872px;top:87px;height:100px;"></div>

        <div class="step-line " style="left:682px;top:107px;width:50px;"></div>
        <div class="step-line verline" style="left:732px;top:107px;height:160px;z-index: 999;"></div>

        <div class="step-line verline" style="left:640px;top:79px;height:50px;"></div>
        <div class="step-line " style="left:520px;top:129px;width:121px;"></div>
        <div class="step-line verline" style="left:520px;top:129px;height:100px;"></div>


        <div class="step-line verline" style="left:668px;top:79px;height:70px;"></div>

        <div class="step-line " style="left:550px;top:149px;width:119px;"></div>
        <div class="step-line verline" style="left:550px;top:149px;height:102px;z-index: 999;"></div>



        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:392px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:612px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:832px;top:60px;"></div>
        <div class="step-line-arrow to_top" style="left:624px;top:76px;"></div>
        <div class="step-line-arrow to_top" style="left:184px;top:76px;"></div>
        <div class="step-line-arrow to_top" style="left:216px;top:76px;"></div>
        <div class="step-line-arrow to_top" style="left:636px;top:76px;"></div>

        <div class="step-line-arrow to_top" style="left:650px;top:76px;"></div>
        <div class="step-line-arrow to_top" style="left:664px;top:76px;"></div>


      </div>
      <div class="step" >
        <div class="step-title-revnue" style="z-index:0">
          <img :src="imageType.swhz" ><br>
          商务合作</div>
        <div class="step-item" style="left:60px;top:50px;z-index:1;">供应商认证</div>
        <div class="step-item" style="left:400px;top:50px;">采购</div>
        <div class="step-item" style="left:620px;top:50px;z-index: 10;">到货确认</div>
        <div class="step-item" style="left:840px;top:50px;">商合结算</div>

        <div class="step-link step-line-text" style="left:144px;top:56px;font-size:12px;" >
          供应商<br>认证数据
        </div>

        <div class="step-link step-line-text" style="left:220px;top:36px;font-size:12px;" >
          采购订<br>单信息
        </div>

        <div class="step-link step-line-text" style="left:320px;top:60px;font-size:12px;" >
          物料数据
        </div>
        <div class="step-link step-line-text" style="left:560px;top:58px;font-size:12px;" >
          采购订单
        </div>

        <div class="step-link step-line-text" style="left:500px;top:80px;font-size:12px;z-index: 1000;" >
          结算数据
        </div>

        <div class="step-link step-line-text" style="left:500px;top:110px;font-size:12px;" >
          采购数据
        </div>

        <div class="step-link step-line-text" style="left:700px;top:110px;font-size:12px;" >
          项目状态信息
        </div>

        <div class="step-link step-line-text" style="left:760px;top:58px;font-size:12px;" >
          采购订单
        </div>
        <div class="step-link step-line-text" style="left:540px;top:04px;font-size:12px;" >
          成本单数据
        </div>

        <div class="step-link step-line-text" style="left:670px;top:04px;font-size:12px;" >
          工程物料<br>到货数据
        </div>

        <!--超链接-->
        <div class="step-link" style="left:300px;top:23px;" >
          <img class="imgico" :src="imageType.normal" />
          采购支付风险防控
        </div>
        <div class="step-link tiaozhuan" style="left:880px;top:23px;" @click="$router.push({name:'biz-mc'})">
          <img class="imgico" :src="imageType.normal" />
          采购、入库、付款单据匹配检查
        </div>
        <div class="step-link" style="left:880px;top:93px;" >
          <img class="imgico" :src="sceneImage['scene2.26']" @click="$router.push({name:'biz-sr'})"/>
          商合报账供应商银行信息一致性检查
        </div>
        <!--线-->
        <div class="step-line" style="left:130px;top:67px;width:59px;"></div>
        <div class="step-line" style="left:206px;top:65px;width:188px;"></div>
        <div class="step-line" style="left:220px;top:55px;width:180px;"></div>
        <div class="step-line" style="left:470px;top:63px;width:150px;"></div>
        <div class="step-line" style="left:690px;top:63px;width:150px;"></div>
        <div class="step-line verline" style="left:874px;top:77px;height:15px;"></div>
        <div class="step-line" style="left:214px;top:92px;width:661px;z-index: 999;"></div>
        <div class="step-line verline" style="left:214px;top:92px;height:195px;z-index: 999;"></div>

        <div class="step-line verline" style="left:654px;top:-43px;height:162px;"></div>
        <div class="step-line" style="left:334px;top:119px;width:321px;"></div>
        <div class="step-line verline" style="left:334px;top:119px;height:172px;z-index: 999;"></div>

        <div class="step-line" style="left:322px;top:108px;width:198px;z-index: 999;"></div>
        <div class="step-line verline" style="left:322px;top:108px;height:182px;z-index: 999;"></div>


        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:392px;top:62px;"></div>
        <div class="step-line-arrow to_right" style="left:614px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:832px;top:60px;"></div>
        <div class="step-line-arrow to_bottom" style="left:868px;top:42px;"></div>



      </div>
      <div class="step" style="background-color: #F5F5F5;">
        <div class="step-title-revnue">
          <img :src="imageType.wygl" ><br>
          物业管理</div>
        <div class="step-item" style="left:480px;top:50px;">物业信息</div>
        <div class="step-item" style="left:640px;top:50px;">场租卡片</div>
        <div class="step-item" style="left:800px;top:50px;">租金支付</div>
        <div class="step-item" style="left:960px;top:50px;">电费支付</div>

        <div class="step-link" style="left:980px;top:10px;" >
          <img class="imgico" :src="sceneImage['scene4.5']" />
          物业电费有票无票支付区间合规性校验
        </div>
        <!--线-->

        <div class="step-line" style="left:550px;top:64px;width:92px;"></div>
        <div class="step-line" style="left:710px;top:64px;width:92px;"></div>


        <div class="step-line verline" style="left:832px;top:78px;height:15px;"></div>
        <div class="step-line verline" style="left:996px;top:78px;height:30px;"></div>
        <div class="step-line" style="left:224px;top:92px;width:608px;"></div>
        <div class="step-line verline" style="left:224px;top:92px;height:105px;"></div>

        <div class="step-line" style="left:234px;top:107px;width:762px;"></div>

        <div class="step-line verline" style="left:234px;top:107px;height:75px;"></div>

        <div class="step-line" style="left:450px;top:26px;width:282px;"></div>
        <div class="step-line verline" style="left:450px;top:26px;height:145px;"></div>
        <div class="step-line" style="left:430px;top:11px;width:121px;"></div>
        <div class="step-line verline" style="left:430px;top:11px;height:159px;"></div>


        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:632px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:792px;top:60px;"></div>

      </div>
      <div class="step" >
        <div class="step-title-revnue">
          <img :src="imageType.zfkt" ><br>
          支付</div>
        <div class="step-item" style="left:80px;top:50px;">计提摊销</div>
        <div class="step-item" style="left:190px;top:50px;">报账</div>
        <div class="step-item" style="left:300px;top:50px;">入账</div>
        <div class="step-item" style="left:410px;top:50px;">资产装配</div>
        <div class="step-item" style="left:520px;top:50px;">自动转资</div>
        <div class="step-item" style="left:630px;top:50px;">结算调整</div>
        <div class="step-item" style="left:740px;top:50px;">决算调整</div>
        <div class="step-item" style="left:850px;top:50px;">竣工决算</div>

        <div class="step-link" style="left:140px;top:83px;" >
          <img class="imgico" :src="imageType.normal" />
          财务稽核前置合同信息一致性检查
        </div>
        <div class="step-link tiaozhuan" style="left:140px;top:99px;" @click="$router.push({name:'biz-sr'})" >
          <img class="imgico" :src="sceneImage['scene2.26']" />
          结算报账发起合规性校验
        </div>
        <div class="step-link tiaozhuan" style="left:378px;top:83px;" @click="$router.push({name:'biz-psr'})">
          <img class="imgico" :src="imageType.normal" />
          项目状态实时获取
        </div>

        <div class="step-link step-line-text" style="left:470px;top:104px;font-size:12px;" >
          资源数据
        </div>
        <!--线-->
        <div class="step-line" style="left:150px;top:64px;width:40px;"></div>
        <div class="step-line" style="left:370px;top:64px;width:40px;"></div>
        <div class="step-line" style="left:480px;top:64px;width:40px;"></div>
        <div class="step-line" style="left:590px;top:64px;width:40px;"></div>
        <div class="step-line" style="left:700px;top:64px;width:40px;"></div>

        <div class="step-line" style="left:480px;top:70px;width:22px;"></div>
        <div class="step-line verline" style="left:502px;top:70px;height:100px;z-index: 99;"></div>

        <!--箭头-->
        <div class="step-line-arrow to_left" style="left:148px;top:60px;"></div>

        <div class="step-line-arrow to_right" style="left:402px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:512px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:622px;top:60px;"></div>
        <div class="step-line-arrow to_right" style="left:732px;top:60px;"></div>

        <div class="step-line-arrow to_bottom" style="left:498px;top:164px;z-index:1;"></div>
        <div class="step-line-arrow to_bottom" style="left:230px;top:43px;"></div>
        <div class="step-line-arrow to_bottom" style="left:220px;top:43px;"></div>
        <div class="step-line-arrow to_bottom" style="left:210px;top:43px;"></div>
        <div class="step-line-arrow to_bottom" style="left:330px;top:43px;"></div>
        <div class="step-line-arrow to_bottom" style="left:446px;top:43px;"></div>

      </div>
      <div class="step" style="background-color: #F5F5F5;">
        <div class="step-title-revnue">
          <img :src="imageType.zc" ><br>资产</div>
        <div class="step-item" style="left:480px;top:50px;">资源管理</div>
        <div class="step-item" style="left:600px;top:50px;">资产管理</div>
        <div class="step-link step-line-text" style="left:560px;top:54px;font-size:12px;" >
          资源<br>数据
        </div>
        <div class="step-link" style="left:680px;top:15px;" >
          <img class="imgico" :src="imageType.normal" />
          资产全视图
        </div>
        <div class="step-link" style="left:680px;top:30px;" >
          <img class="imgico" :src="imageType.normal" />
          资源资产查询
        </div>
        <div class="step-link" style="left:680px;top:45px;" >
          <img class="imgico" :src="imageType.normal" />
          一码到底全生命周期监控
        </div>
        <div class="step-link" style="left:680px;top:60px;" >
          <img class="imgico" :src="imageType.normal" />
          一码到底标签操作信息实时查询
        </div>
        <div class="step-link" style="left:680px;top:75px;" >
          <img class="imgico" :src="imageType.normal" />
          一码到底全流程溯源
        </div>
        <div class="step-link" style="left:680px;top:90px;" >
          <img class="imgico" :src="imageType.normal" />
          一码到底统一扫码入口
        </div>
        <!--线-->
        <div class="step-line" style="left:550px;top:64px;width:50px;"></div>
        <!--箭头-->
        <div class="step-line-arrow to_right" style="left:592px;top:60px;"></div>


      </div>
    <!-- <div class="step" style="height: 20px;">
      <div  >
          <div class="lendge-item" style="float:left;"><img class="imgico" :src="imageType.normal" />场景事中拦截比率&lt;=40% </div>
          <div class="lendge-item" style="float:left;"><img class="imgico" :src="imageType.warning" />40%&lt;场景事中拦截比率&lt;=70%</div>
          <div class="lendge-item" style="float:left;"><img class="imgico" :src="imageType.error" />场景事中拦截比率&gt;70%</div> -->
          <!-- <div style="float:right;font-size:6px;padding-left: 10px;">强校验场景</div>
          <div style="float:right;color: rgb(8, 123, 232);font-size:6px;padding-left: 10px;">弱校验场景</div>
          <div style="float:right;color: rgb(225, 114, 5);font-size:6px;">查询提示场景</div> -->
        <!-- </div>
    </div> -->
      
    </div>
  </div>
</template>

<style scoped>
  .home-page {
    position: relative;
    width: 100%;
    border-right: 1px solid #f4f4f4;
    background: #fff;
  }

  .home-page>.header {
    /* height: 60px;
    line-height: 60px; */
    font-size: 12px;
    /* background: #eaeaea; */
    border-bottom: 1px solid #c7c7c7;
    text-align: center;
    color: #EB4B4B;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 62px;
  }
  .home-page>.header >img{
    height: 40px;
  }
  .home-page>.header>.header-title {
    line-height: 30px;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
  justify-content: center;
  margin-bottom: 0px !important;
  }
  
  .home-page>.header>.header-a {
    
    display: flex;
    flex-direction: column;
    text-align: right;
  }

  .home-page>.flow-wrap {
    overflow: auto;
  }

  .flow-wrap>.step {
    position: relative;
    width: 100%;
    min-width: 1120px;
    height: 120px;
    border-bottom: 1px dashed #bababa;
  }

  .step .step-title {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
  }

  .step .step-title-revnue img{
    width: 38px;
    height: 38px;
  }

 .step .step-title-revnue {
  position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    background: #F5F5F5;
    color: rgb(230, 99, 99);
    
    /* padding: 60px 5px; */

    display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  }

  .step-title.offset15 {
    padding-top: 50px;
  }

  .step-item {
     position: absolute;
    height: 28px;
    min-width: 70px;
    line-height: 28px;
    font-size: 12px;
    background: #f2c2c2;
    border: 1px solid #f2c2c2;
    color: #000;
    text-align: center;
    border-radius: 3px;
    padding: 0 10px;
    /* cursor: default; */
  }

 .step-item-reven {
  position: absolute;
    /* height: 28px; */
    width: 70px;
    font-size: 12px;
    background: #f2c2c2;
    border: 1px solid #f2c2c2;
    color: #000;
    text-align: center;
    border-radius: 3px;
    cursor: default;
    /* transform: scale(0.6); */
    white-space: pre-wrap;
  }

  .step-item:hover {
    background: #f2c2c2;
  }

  .step .flow-lendge {
    position: absolute;
    width: 600px;
  }

  .step .step-link {
    position: absolute;
    font-size: 12px;
    /* cursor: pointer; */
    z-index: 5;
  }

  .step .step-link:hover {
    color: #4390ea;
  }


  .step-link .imgico {
    width: 16px;
    height: 16px;
    margin-right: 0px;
    margin-top: -6px;
  }

  .flow-lendge>.lendge-item {
    float: left;
    margin-right: 15px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }

  .lendge-item .imgico {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: -4px;
  }

  .step-item.lgbtn {
    width: 200px;
    /* cursor: pointer; */
  }

  .step-item.lgbtn:hover {
    background: #fff;
    color: #0053a7;
    font-weight: 550;
  }

  .step-line {
    position: absolute;
    height: 1px;
    border-bottom: 1px solid #666;
  }

  .step-line.verline {
    width: 1px;
    border-bottom: none;
    border-left: 1px solid #666;
  }

  .step-line-arrow {
    position: absolute
  }

  .step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
  }

  .step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  .step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .step-line-text{
      background-color: #fff;
      font-size: 50%;
  }

  .tiaozhuan{
    
  }
  .tiaozhuan:hover{
    color:#eb4a4b !important;
    text-decoration:underline;
    font-weight:bold;
    cursor: pointer;
  }
</style>

<script>

  export default {
    data() {
      return {
        currentTime: '2020-12-01 00:00:00',
        icoType: 'normal',
        imageType:{
          normal:require("@/assets/img/normal.png"),
          error:require("@/assets/img/error.png"),
          warning:require("@/assets/img/warning.png"),
          zf:require("@/assets/img/zf.png"),
          gc:require("@/assets/img/gc.png"),
          swhz:require("@/assets/img/swhz.png"),
          wygl:require("@/assets/img/wygl.png"),
          zfkt:require("@/assets/img/zfkt.png"),
          zc:require("@/assets/img/zc.png")
        },
        sceneImage:{
           'scene1.5':require("@/assets/img/normal.png"),
           'scene2.2':require("@/assets/img/normal.png"),
           'scene2.3':require("@/assets/img/normal.png"),
           'scene2.6':require("@/assets/img/normal.png"),
           'scene2.8':require("@/assets/img/normal.png"),
           'scene2.9':require("@/assets/img/normal.png"),
           'scene2.10':require("@/assets/img/normal.png"),
           'scene2.11':require("@/assets/img/normal.png"),
           'scene2.12':require("@/assets/img/normal.png"),
           'scene2.13':require("@/assets/img/normal.png"),
           'scene2.14':require("@/assets/img/normal.png"),
           'scene2.15':require("@/assets/img/normal.png"),
           'scene2.16':require("@/assets/img/normal.png"),
           'scene2.17':require("@/assets/img/normal.png"),
           'scene2.18':require("@/assets/img/normal.png"),
           'scene2.21':require("@/assets/img/normal.png"),
           'scene2.22':require("@/assets/img/normal.png"),
           'scene2.23':require("@/assets/img/normal.png"),
           'scene2.25':require("@/assets/img/normal.png"),
           'scene2.26':require("@/assets/img/normal.png"),
           'scene4.5':require("@/assets/img/normal.png")
        }
      }
    },
    created() {
      this.setCurrentTime()
      this.queryPageCount('*')

      console.log("当前用户:["+sessionStorage.getItem('userName')+"]");
    },
    computed: {
    },
    methods: {
      dateFormat(date) {
        const timeDate = new Date(date.getTime() + (8 * 3600 * 1000))
        const timeDateString = timeDate.toJSON()
        return timeDateString.replace('T', ' ').slice(0, 19)
      },
      setCurrentTime() {
        this.currentTime = this.dateFormat(new Date())
      },
      setSceneImage(scene,per){
          var key = 'scene'+scene;
          if(per > 0.4 && per <= 0.7){
             this.sceneImage[key]=this.imageType.warning;
          }else if(per > 0.7){
             this.sceneImage[key]=this.imageType.error;
          }else{
            this.sceneImage[key]=this.imageType.normal;
          }
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          //console.log(r.data.data);
          var self = this;
          if(r.data.data && r.data.data.length >0){
              var scenes = r.data.data;
              scenes.forEach((item,i)=>{
                  self.setSceneImage(item.scene,item.per);
              });
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>
